<template>
  <div class="project-box">
    <!-- 订单编号 -->
    <div class="orderNo-box">
      <h4>订单编号：{{ orderInfo.orderNo }}</h4>
      <el-badge :value="unread" class="item" :hidden="!unread">
        <svg-icon icon-class="xx_icon_nor" @click="message" />
      </el-badge>
    </div>

    <div class="project_roll">
      <!-- 菜单 -->
      <div class="project_menu">
        <ul>
          <li :class="menuState == 1 ? 'isActive' : ''" @click="clickAssess">
            条件评估
          </li>
          <li :class="menuState == 2 ? 'isActive' : ''" @click="clickNeed">
            项目需求
          </li>
          <li :class="menuState == 3 ? 'isActive' : ''" @click="clickStatus">
            流程状态
          </li>
          <li :class="menuState == 4 ? 'isActive' : ''" @click="clickStuff">
            项目材料
          </li>
        </ul>
      </div>

      <!-- 条件评估 -->
      <div class="assessBox" v-if="menuState == 1">
        <h3>
          <p>编号</p>
          <p>条件</p>
          <p>评估结果</p>
        </h3>

        <template v-for="group in criteria">
          <h4>{{ group.group }}</h4>
          <ul>
            <li v-for="(list, idnex) in group.children" :key="idnex">
              <i>{{ list.no > 9 ? list.no : "0" + list.no }}</i>
              <p>{{ list.name }}</p>
              <p>
                <span class="succ" v-if="list.status == '1'">合格</span>
                <span class="nosucc" v-else-if="list.status == '2'"
                  >不合格</span
                >
                <span v-else>未评估</span>
              </p>
            </li>
          </ul>
        </template>
      </div>

      <!-- 项目需求 -->
      <div class="needBox" v-else-if="menuState == 2">
        <h3>
          <p>字段</p>
          <p>需求</p>
        </h3>

        <template v-for="group in demand">
          <h4>{{ group.group }}</h4>
          <el-form ref="form" label-width="130px" label-position="left">
            <el-form-item
              :label="list.field"
              v-for="(list, index) in group.children"
              :key="index"
            >
              <el-input
                :placeholder="list.describable"
                v-model="list.value"
                readonly
              ></el-input>
            </el-form-item>
          </el-form>
        </template>
      </div>

      <!-- 流程状态 -->
      <div class="statusBox" v-else-if="menuState == 3">
        <h3>
          <p>事项</p>
          <p>支付比例</p>
          <p>金额</p>
          <p>状态</p>
          <p>时间线</p>
        </h3>
        <!-- 1 -->
        <div class="stepBox">
          <el-steps
            direction="vertical"
            :active="getActiveNum"
            finish-status="success"
          >
            <!-- succeed 成功的状态  active 当前的状态  -->

            <template v-for="group in step">
              <h3 :class="getGroupClass(group)">{{ group.group }}</h3>
              <el-step
                :class="getListClass(list)"
                v-for="list in group.children"
                :key="list.id"
              >
                <!-- 步骤和详情字段 -->
                <template slot="title">
                  <div @click="clickDrop(list.id)">
                    <h3>{{ list.name }}</h3>
                    <p class="ratio">
                      <span v-if="list.scale">{{ list.scale }}%</span>
                    </p>
                    <p class="sum">
                      <span v-if="list.scale">{{
                        (projectData.amount * (list.scale / 100)) / 10000 + "万"
                      }}</span>
                    </p>
                    <p class="numDays">
                      <span v-if="list.scale">
                        <span v-if="list.isPaid">已支付</span>
                        <span v-else class="">
                          <!-- <b>待用户支付完成才可进入下一步</b> -->
                          <b>未支付</b>
                        </span>
                      </span>
                    </p>
                    <!-- <p class="payBtn" v-if="!list.isPaid">
                                        <el-button type="primary" round size="mini">支付</el-button>
                                    </p> -->
                    <p class="succDate">{{ getPredictDay(list) }}</p>
                    <!-- <p class="endIcon">
                                        <i class="el-icon-caret-top" v-if="dropDown == list.id"></i>
                                        <i class="el-icon-caret-bottom" v-else></i>
                                    </p> -->
                  </div>
                </template>
                <!-- 提示和表格 -->
                <template slot="description">
                  <div class="succeeHint" v-if="list.status == '0'">
                    <p>{{ list.name }}完成</p>
                    <p>{{ list.finishTime }}</p>
                  </div>
                  <div
                    class="succeeHint"
                    v-if="list.status == '0' && list.scale"
                  >
                    <p>用户 {{ orderInfo.nickname }} 完成支付</p>
                    <p>{{ list.finishTime }}</p>
                  </div>
                  <div class="succeeHint" v-if="list.status == '2'">
                    <p>{{ list.name }}进行中</p>
                    <p>{{ list.startTime }}</p>
                  </div>
                </template>
              </el-step>
            </template>
          </el-steps>
        </div>
      </div>

      <!-- 项目材料 -->
      <div class="stuffBox" v-else>
        <!-- 表格 -->
        <div class="stepTable">
          <el-table :data="materialsData">
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              width="80"
            >
            </el-table-column>
            <el-table-column label="材料名称">
              <template slot-scope="scope">
                <span style="margin-left: 7px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="file" label="附件">
              <template slot-scope="scope">
                <p v-if="scope.row.fileName">
                  <i
                    class="el-icon-circle-check"
                    v-if="scope.row.status == '1'"
                  ></i>
                  <i
                    class="el-icon-warning-outline"
                    v-else-if="scope.row.status == '2'"
                  ></i>
                  <i class="el-icon-delete" v-else></i>
                  {{ scope.row.fileName }}
                </p>
                <p class="waitUpload" v-else>待上传</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comdrawer from "@/wss/components/Comdrawer.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import { switchTree } from "@/wss/utils/wss.js";
import {
  getProjectGetInfoApi,
  editProjectApi,
  uploadProjectMaterialsApi,
} from "@/wss/newApi_3-24/doc/project.js";
import { getMessageList } from "@/BMViews/api/upload/index.js";
export default {
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { SubBtn, Comdrawer },
  data() {
    return {
      // 主内容区*************
      unread: 0, //未读信息数量
      menuState: 1, // 当前菜单状态 1条件评估 2项目需求 3流程状态 4项目材料

      projectData: {}, //项目的信息
      criteria: [], //条件评估数据列表
      demand: [], //项目需求数据列表
      step: [], //项目步骤数据列表
      typeId: "", //项目id

      dropDown: "", //下拉的显示隐藏
      // dropDown2:true,//下拉的显示隐藏

      sampleDrawer: false, //材料样本抽屉显示
      sampleData: [], //当前的材料样本数据

      fileList: [], //上传的列表
      fileIndex: "", //当前点击上传的第几个文件

      materialsData: [], //项目材料表格数据
    };
  },
  mounted() {
    this.getProjectGetInfo(); // 获取项目的信息
    // 获取当前订单的左上角未读信息
    this.getOrderMeetList();
  },
  watch: {
    //监控当切换的时候重新唤起项目的信息
    orderInfo(newValue, oldValue) {
      this.getProjectGetInfo(); // 获取项目的信息

      // 获取当前订单的左上角未读信息
      this.getOrderMeetList();
    },
  },
  computed: {
    // 计算当前已付的金额
    getPaid() {
      let amount = this.projectData.amount;
      //合并子步骤
      let newStep = [];
      this.step.forEach((item) => {
        newStep = [...newStep, ...item.children];
      });
      // 过滤已支付的子步骤
      let paidArr = newStep.filter((item) => {
        return item.isPaid == true;
      });
      // 计算已付金额
      let paidAmount = 0;
      paidArr.forEach((item) => {
        paidAmount = paidAmount + (item.scale / 100) * amount;
      });
      return paidAmount / 10000;
    },

    // 计算当前处在的步骤
    getActiveNum() {
      let newStep = []; //全部子步骤的集合
      this.step.forEach((item) => {
        newStep = [...newStep, ...item.children];
      });
      // 过滤出已完成的数据
      let numArr = newStep.filter((item) => {
        return item.status == "0";
      });
      return numArr.length;
    },
  },
  methods: {
    // 获取项目的信息
    async getProjectGetInfo() {
      let result = await getProjectGetInfoApi({ id: this.orderInfo.goodsId });
      if (result.code == 200) {
        this.projectData = result.data; //项目的信息
        // 获取项目的typeId
        this.typeId = result.data.typeId;
        let typeId = result.data.typeId;
        //根据no字段排序
        let tj = result.data.conditions.sort(
          (a, b) => Number(a.no) - Number(b.no)
        );
        // 条件： 转换树形结构
        this.criteria = switchTree(tj);
        //根据no字段排序
        let xq = result.data.needs.sort((a, b) => Number(a.no) - Number(b.no));
        // 需求： 转换树形结构
        this.demand = switchTree(xq);
        //根据no字段排序
        let lc = result.data.flows.sort((a, b) => Number(a.no) - Number(b.no));
        // 步骤： 转换树形结构
        this.step = switchTree(lc);

        // 获取项目材料的数据
        this.materialsData = result.data.materials;
        console.log(this.materialsData, "获取项目材料的数据");
      }
    },

    // 项目修改接口
    async editProject() {
      let demand = JSON.parse(JSON.stringify(this.demand));
      let project = {
        id: this.orderInfo.goodsId,
        needs: [],
        materials: this.materialsData,
      };
      demand.forEach((item) => {
        item.children.forEach((item) => {
          delete item.createBy;
          delete item.createTime;
          delete item.updateBy;
          delete item.updateTime;
          delete item.typeId;
          project.needs.push(item);
        });
      });
      let result = await editProjectApi(project);
      if (result.code == 200) {
        this.$message({ type: "success", message: "提交成功！" });
      }
    },

    // 项目未读信息的接口
    async getOrderMeetList() {
      let result = await getMessageList();
      if (result.code == 200) {
        let list = result.data.rows;
        let unrObj = list.find((itme) => {
          return itme.id == this.orderInfo.orderNo;
        });
        this.unread = 0; //清除之前的聊天
        if (unrObj.unread) {
          this.unread = unrObj.unread;
        }
      }
    },

    // *************************************条件评估*************************************
    // 点击条件评估
    clickAssess() {
      this.menuState = 1;
    },
    // *************************************条件评估*************************************end

    // *************************************项目需求*************************************
    // 点击项目需求
    clickNeed() {
      this.menuState = 2;
    },
    //点击提交需求按钮
    async subNeeds() {
      await this.editProject(); //修改项目的接口
      await this.getProjectGetInfo(); // 重新获取项目的信息
    },
    // *************************************项目需求*************************************end

    // *************************************流程状态*************************************
    // 点击流程状态
    clickStatus() {
      this.menuState = 3;
    },

    //获取当前步骤组标题的状态class
    getGroupClass(group) {
      // 执行状态  0已完成 1未开始 2进行中 -1已关闭
      // 子步骤里有一个是成功的就返回succeed，有一个是进行中的就返回active，其他返回空
      for (let i = 0; i < group.children.length; i++) {
        if (group.children[i].status == "0") {
          return "succeed";
        } else if (group.children[i].status == "2") {
          return "active";
        } else {
          return "";
        }
      }
    },

    //获取当前步骤的状态class
    getListClass(list) {
      // succeed 成功的状态  active 当前的状态 ''未开始
      // 执行状态  0已完成 1未开始 2进行中 -1已关闭
      if (list.status == "0") {
        return "succeed";
      } else if (list.status == "1") {
        return "";
      } else if (list.status == "2") {
        return "active";
      }
    },

    // 点击某一条子流程 提示显示和隐藏
    clickDrop(listId) {
      this.dropDown = listId;
    },

    // 获取预计完成时间
    getPredictDay(list) {
      let days = 0;
      let newStep = []; //全部子步骤的集合
      this.step.forEach((item) => {
        newStep = [...newStep, ...item.children];
      });
      // 拿到要计算的天数，当前步骤前面的所有工作时间的和
      for (let i = 0; i < newStep.length; i++) {
        if (newStep[i].id == list.id) {
          days += newStep[i].workday;
          return this.getTime(days);
        } else {
          days += newStep[i].workday;
        }
      }
    },
    getTime(days) {
      var dateT = new Date();
      //转换为MM-DD-YYYY格式
      var nDate = new Date(
        dateT.getFullYear() +
          "-" +
          (dateT.getMonth() + 1) +
          "-" +
          dateT.getDate()
      );
      var millSeconds = Math.abs(nDate) + days * 24 * 60 * 60 * 1000;
      var rDate = new Date(millSeconds);
      var month = rDate.getMonth() + 1;
      if (month < 10) month = month;
      var date = rDate.getDate();
      if (date < 10) date = date;
      return "预计" + month + "月" + date + "日完成";
    },

    // *************************************流程状态*************************************end

    // *************************************项目材料*************************************
    // 点击项目材料
    clickStuff() {
      this.menuState = 4;
    },

    //点击表格材料样本
    sampleShow(row) {
      this.sampleData = row;
      this.sampleDrawer = true;
    },

    // 表格自定义索引值
    indexMethod(index) {
      return "0" + (index + 1);
    },

    //删除已上传的文件
    async removeFile(scope) {
      // 置空已上传的材料
      scope.row.fileName = "";
      scope.row.fileUrl = "";
      await this.editProject(); //替换项目材料 项目修改接口
      // 刷新项目订单信息
      this.getProjectGetInfo(); // 获取项目的信息
    },

    // 获取上传按钮的状态
    getUploadState(row) {
      // true显示--，false显示上传按钮
      if (row.fileName) {
        if (row.status == "2") {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },

    //点击文件上传按钮
    clickUpload(scope) {
      this.fileIndex = scope.$index; //获取当前上传的是哪一个
    },

    //上传文件的回调
    async getFile(file, fileList) {
      //上传判断
      const isFormat =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isFormat) {
        this.$message.error("只能上传JPG、PNG格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传材料大小不能超过 2MB!");
        return;
      }

      if (fileList && fileList.length > 1) {
        fileList.shift();
      }
      this.materialsData[this.fileIndex].file = file;
      // 修改项目材料
      await this.uploadProjectMaterials(this.materialsData[this.fileIndex]);
    },

    // 修改项目材料 调用项目修改接口
    async uploadProjectMaterials(materialsData) {
      let formData = new FormData();
      formData.append("file", materialsData.file.raw);
      formData.append("materialId", materialsData.id);
      formData.append("projectId", this.projectData.id);
      let result = await uploadProjectMaterialsApi(formData);
      if (result.code == 200) {
        this.$message({ type: "success", message: "上传成功！" });
        // 刷新项目订单信息
        this.getProjectGetInfo(); // 获取项目的信息
      }
    },
    // *************************************项目材料*************************************end

    // ***********************修改收比***********************
    // 点击修改收比按钮
    editRatio() {
      // 显示项目修改收比  隐藏项目
      this.$bus.$emit("editRatioBus");
    },
    // ***********************修改收比*********************** end
    //跳转到聊天室
    message() {
      // 跳转到当前项目的聊天页面
      this.$router.push({
        path: "/Bm-personalCenter/messageCenter",
        query: { orderId: this.orderInfo.orderNo },
      });
    },
  },
  // ***********************修改收比*********************** end
};
</script>

<style scoped>
ul,
h3,
h4,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
:v-deep .title-box .titile {
  border-bottom: 0;
}
.project-box {
  width: 100%;
  padding: 0 30px;
}
/* 订单编号 */
.project-box > h4 {
  padding: 10px 15px;
  background-color: #f4f5f8;
  font-size: 12px;
  font-weight: 400;
  color: #2e3f5e;
}
.orderNo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f4f5f8;
  padding: 0 0 0 15px;
}
.orderNo-box h4 {
  font-size: 12px;
  font-weight: 400;
  color: #2e3f5e;
}
.orderNo-box .svg-icon {
  font-size: 24px;
  /* padding: 5px; */
  margin: 10px 20px;
  cursor: pointer;
}
>>> .orderNo-box .el-badge__content.is-fixed {
  position: absolute;
  top: 15px;
  right: 30px;
  transform: translateY(-50%) translateX(100%);
}
/* 主内容区 */
.project_roll {
  margin-top: 20px;
}

/* 菜单样式 */
.project_menu {
  margin-bottom: 20px;
}
.project_menu ul {
  display: flex;
  justify-content: space-between;
}
.project_menu ul > li {
  flex: 1;
  background-color: #f1f3ff;
  border: 1px solid #e5e6e9;
  text-align: center;
  line-height: 50px;
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  margin-right: 1%;
  transition: all 0.3s;
  cursor: pointer;
}
.project_menu ul > li:first-child {
  border-radius: 40px 0 0 40px;
}
.project_menu ul > li:last-child {
  border-radius: 0 40px 40px 0;
  margin-right: 0;
}
.project_menu ul > li.isActive,
.project_menu ul > li:hover {
  background-color: #39486f;
  color: #fff;
}

/* 条件评估 */
.assessBox {
  margin-bottom: 80px;
}
.assessBox h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}
.assessBox h3 > p:first-child {
  width: 50px;
}
.assessBox h3 > p:nth-child(2) {
  flex-grow: 1;
}
.assessBox h3 > p:nth-child(3) {
  width: 100px;
  text-align: center;
}
.assessBox h4 {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
.assessBox ul > li {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
}
.assessBox ul > li i {
  display: block;
  width: 50px;
  font-style: normal;
}
.assessBox ul > li > p:nth-child(2) {
  flex: 1;
}
.assessBox ul > li > p:nth-child(3) {
  width: 100px;
  text-align: center;
}

.assessBox ul > li > p > span {
  font-size: 14px;
  font-weight: 400;
}
.assessBox ul > li > p > span.succ {
  color: #24ae39;
}
.assessBox ul > li > p > span.nosucc {
  color: #f55d51;
}

/* 项目需求 */
.needBox {
  padding-bottom: 80px;
}
.needBox h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}
.needBox h3 > p:first-child {
  width: 18%;
}
.needBox h3 > p:nth-child(2) {
  flex-grow: 1;
}
.needBox h4 {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.needBox .el-form {
  margin: 20px 0;
}
.needBox .mb100 {
  margin-bottom: 100px;
}
::v-deep .needBox .el-form .el-form-item {
  margin-bottom: 20px;
}
::v-deep .needBox .el-form .el-form-item__label {
  font-size: 14px;
  font-weight: 400;
  color: #2e3f5e;
  line-height: 40px;
}
::v-deep .needBox .el-form .el-input.el-input--medium {
  width: 100% !important;
}
::v-deep .needBox .el-form .el-input__inner {
  height: 40px;
  line-height: 40px;
}

/* 流程状态 */
.statusBox {
}
.statusBox > h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
.statusBox > h3 > p:first-child {
  width: 30%;
}
.statusBox > h3 > p:nth-child(2) {
  width: 21%;
}
.statusBox > h3 > p:nth-child(3) {
  width: 21%;
}
.statusBox > h3 > p:nth-child(4) {
  width: 15%;
}

/* 步骤 */
.stepBox {
  position: relative;
  margin-bottom: 80px;
}
/* .stepBox::before{
    content: '';
    position: absolute;
    left: 11px;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    z-index: 0;
} */
.stepBox h3 {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 600;
  color: #2e3f5e;
  background-color: #fff;
}
.stepBox .el-steps > h3 {
  margin-top: 40px;
}
.stepBox .el-steps > h3:first-child {
  margin-top: 0;
}
::v-deep .stepBox .el-step {
  position: relative;
  padding-top: 45px;
}

::v-deep .stepBox .el-step::before {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
  z-index: 0;
}
::v-deep .stepBox .el-step__line {
  display: none;
}
::v-deep .stepBox .el-step__icon-inner {
  font-size: 12px;
  font-weight: 400;
  color: #2e3f5e;
}
::v-deep .stepBox .el-step__head.is-finish {
  color: #eaebed;
  border-color: #eaebed;
}
::v-deep .stepBox .el-step__icon.is-text {
  border: 1px solid #ebebeb;
}
::v-deep .stepBox .el-step__title.is-wait {
  color: #2e3f5e;
  font-size: 14px;
}

::v-deep .stepBox .el-step__title > div {
  display: flex;
  align-items: center;
  padding-bottom: 0;
  cursor: pointer;
}
::v-deep .stepBox .el-step__title h3 {
  width: 30%;
  font-size: 14px;
  font-weight: bold;
  color: #aaa;
}
::v-deep .stepBox .el-step__title .ratio {
  width: 20%;
}

::v-deep .stepBox .el-step__title .sum {
  width: 20%;
}
::v-deep .stepBox .el-step__title .payBtn {
  display: none;
  width: 12%;
}
::v-deep .stepBox .el-step__title .payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  padding: 5px 10px;
}

::v-deep .stepBox .el-step__title .ratio,
::v-deep .stepBox .el-step__title .sum,
::v-deep .stepBox .el-step__title .payBtn,
::v-deep .stepBox .el-step__title .succDate {
  font-size: 12px;
  font-weight: 400;
  color: #a4adbf;
}
::v-deep .stepBox .el-step__title .numDays {
  flex-grow: 1;
  font-size: 12px;
  font-weight: 400;
  color: #a4adbf;
}
::v-deep .stepBox .el-step__title .numDays b {
  font-weight: 400;
}
::v-deep .stepBox .el-step__title .numDays > span > b:nth-child(1) {
  display: none;
}

::v-deep .stepBox .el-step__title .endIcon {
  display: none;
}
::v-deep .stepBox .el-step__title .endIcon i {
  color: #69788b;
}
.stepList .stepBox:last-child {
  padding-bottom: 0;
  margin-bottom: 100px;
}

::v-deep .stepBox .el-step .el-step__description {
  padding: 0;
}
::v-deep .stepBox .el-step .el-step__description .succeeHint {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #fafafa;
  color: #666666;
}
/* 步骤成功状态 */
.stepBox h3.succeed {
  color: #24ae39;
}
::v-deep .stepBox .el-step.succeed::before {
  background-color: #24ae39;
}
::v-deep .stepBox .el-step.succeed h3 {
  font-weight: bold;
  color: #24ae39;
}
::v-deep .stepBox .el-step.succeed .el-step__head.is-success {
  color: #24ae39;
  border-color: #24ae39;
}
::v-deep .stepBox .el-step.succeed .el-step__icon.is-text {
  background-color: #24ae39;
  border: 1px solid #24ae39;
}
::v-deep .stepBox .el-step.succeed .el-step__icon-inner {
  color: #fff;
}
.stepBox .el-step.succeed .succDate {
  display: none;
}
.stepBox .el-step.succeed .endIcon {
  display: block;
}
/* 步骤成功状态 end*/

/* 当前激活的步骤 */
.stepBox h3.active {
  color: #f87a23;
}
::v-deep .stepBox .el-step.active::before {
  background-color: #f87a23;
}
::v-deep .stepBox .el-step.active .payBtn {
  display: block;
}
::v-deep .stepBox .el-step.active .numDays > span > b:nth-child(1) {
  display: block;
}
::v-deep .stepBox .el-step.active .numDays > span > b:nth-child(2) {
  display: none;
}

::v-deep .stepBox .el-step.active .el-step__title > div h3,
::v-deep .stepBox .el-step.active .el-step__title > div p {
  color: #f87a23;
}
::v-deep .stepBox .el-step.active .el-step__head.is-process {
  color: #f87a23;
  border-color: #f87a23;
}
::v-deep .stepBox .el-step.active .el-step__icon.is-text {
  background-color: #f87a23;
  border: 1px solid #f87a23;
}
::v-deep .stepBox .el-step.active .el-step__icon-inner {
  color: #fff;
}
.stepBox .el-step.active .succDate {
  display: none;
}
.stepBox .el-step.active .endIcon {
  display: block;
}
/* 当前激活的步骤end */
</style>

<style scoped>
/* 步骤表格 */
.stepTable {
  margin-top: 15px;
  margin-bottom: 80px;
  color: #666666;
}
.stepTable .el-table::before {
  display: none;
}
.stepTable .el-table .uploadHen {
  display: block;
  padding: 6px 0;
}
::v-deep .stepTable .el-table tr {
  background-color: #fff;
}
::v-deep .stepTable .el-table tr th {
  background-color: transparent;
  border-bottom: 1px solid #f5f7fa;
}
::v-deep .stepTable .el-table td {
  padding: 10px 0;
  border-bottom: 1px solid #f5f7fa;
}
::v-deep .stepTable .el-table td i {
  cursor: pointer;
}
::v-deep .el-table td i.el-icon-circle-check {
  color: #00a73c;
}
::v-deep .el-table td i.el-icon-warning-outline {
  color: #fa7c21;
}
::v-deep .stepTable .el-table td svg {
  cursor: pointer;
}
.stepTable .el-table .upFile {
  color: #f87a23;
}

.stepTable .el-table .waitUpload,
.stepTable .el-table .uploadHen {
  font-size: 14px;
  font-weight: 400;
  color: #cdd0d6 !important;
}

/* 材料样本抽屉 */
.sampleDrawer {
  padding: 0 20px;
}
.sampleDrawer h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2e3f5e;
  margin-bottom: 20px;
}
.sampleDrawer ul {
  margin-bottom: 30px;
}
.sampleDrawer ul > li {
  font-size: 16px;
  font-weight: 400;
  color: #232323;
  line-height: 32px;
}
.sampleDrawer img {
  max-width: 100%;
}
/* 步骤表格 end */
</style>

<style scoped>
/* 底部按钮 */
::v-deep .addSubBtn .subBtn {
  justify-content: space-between;
  padding: 10px 30px;
}
::v-deep .addSubBtn .subBtn > p {
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  color: #999999;
  cursor: pointer;
}
::v-deep .statusBox .addSubBtn .subBtn {
  justify-content: space-between;
  align-items: center;
}
::v-deep .statusBox .addSubBtn .subBtn .payable {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep .statusBox .addSubBtn .subBtn .payable > b {
  font-size: 18px;
  color: #f87a23;
}
::v-deep .statusBox .addSubBtn .subBtn .payable > span {
  color: #999999;
  font-weight: 400;
}
</style>
